<template>
  <div class="user-bikes-container">
    <!-- 页面标题和搜索框 -->
    <div class="header-section">
      <h1 class="page-title">我的自行车</h1>
      <div class="search-container">
        <el-input 
          v-model="searchQuery" 
          placeholder="搜索车辆名称" 
          clearable 
          prefix-icon="el-icon-search"
          @keyup.enter="handleSearch"
          class="search-input">
        </el-input>
        <el-button 
          type="primary" 
          @click="handleSearch"
          class="search-btn">
          搜索
        </el-button>
      </div>
    </div>
    
    <!-- 车辆列表 -->
    <div class="bikes-list">
      <div 
        v-for="bike in filteredBikes" 
        :key="bike.id" 
        class="bike-card"
        @click="goToDetailPage(bike.id)"> <!-- 修改点击事件为跳转到详情页 -->
        
        <div class="bike-image-container" @click.stop> <!-- 阻止事件冒泡 -->
          <img 
            :src="bike.imageUrl" 
            :alt="bike.name" 
            class="bike-image"
            @click="goToDetailPage(bike.id)"> <!-- 为图片添加点击事件 -->
        </div>
        
        <div class="bike-info">
          <h3 class="bike-name" @click.stop="goToDetailPage(bike.id)">{{ bike.name }}</h3> <!-- 为名称添加点击事件 -->
          <p class="bike-type">类型: {{ bike.type }}</p>
          <p class="bike-status">
            <el-tag :type="getStatusType(bike.status)">{{ bike.status }}</el-tag>
          </p>
        </div>
      </div>
      
      <!-- 空状态提示 -->
      <div v-if="filteredBikes.length === 0" class="empty-state">
        <el-empty description="暂无车辆信息" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router' // 引入路由钩子

// 车辆数据
const bikes = ref([
  {
    id: 1,
    name: "山地探险者 Pro",
    type: "山地车",
    status: "正常使用",
    purchaseDate: "2022-05-15",
    description: "专业级山地自行车，适合复杂地形骑行，碳纤维车架，27速变速系统，油压碟刹",
    imageUrl: "https://picsum.photos/seed/mountain1/400/300",
    frameMaterial: "碳纤维",
    gearSystem: "Shimano Deore 27速"
  },
  {
    id: 2,
    name: "城市通勤者",
    type: "城市车",
    status: "维修中",
    purchaseDate: "2021-10-22",
    description: "舒适型城市通勤自行车，铝合金车架，前后避震，适合日常通勤使用",
    imageUrl: "https://picsum.photos/seed/city1/400/300",
    frameMaterial: "铝合金",
    gearSystem: "Shimano Tourney 21速"
  },
  {
    id: 3,
    name: "公路竞速者 Ultra",
    type: "公路车",
    status: "正常使用",
    purchaseDate: "2023-03-10",
    description: "轻量化公路赛车，全碳纤维车架，气动设计，适合长距离高速骑行",
    imageUrl: "https://picsum.photos/seed/road1/400/300",
    frameMaterial: "高模量碳纤维",
    gearSystem: "Shimano Ultegra 22速"
  },
  {
    id: 4,
    name: "便携折叠车 X10",
    type: "折叠车",
    status: "正常使用",
    purchaseDate: "2022-08-05",
    description: "轻便折叠自行车，铝合金材质，快速折叠设计，适合城市短途出行和公共交通携带",
    imageUrl: "https://picsum.photos/seed/folding1/400/300",
    frameMaterial: "航空铝合金",
    gearSystem: "Shimano Alfine 8速内变速"
  }
])

// 搜索查询
const searchQuery = ref('')

// 获取路由实例
const router = useRouter()

// 过滤后的车辆列表
const filteredBikes = computed(() => {
  if (!searchQuery.value) {
    return bikes.value
  }
  
  const query = searchQuery.value.toLowerCase()
  return bikes.value.filter(bike => 
    bike.name.toLowerCase().includes(query)
  )
})

// 跳转到详情页
const goToDetailPage = (id) => {
  router.push({
    name: 'OBDetail',
    params: { id }
  })// 跳转到详情页并传递ID
  console.log('跳转到车辆详情页，ID:', id) // 调试日志
}

// 处理搜索
const handleSearch = () => {
  console.log('搜索车辆:', searchQuery.value)
}

// 状态类型转换
const getStatusType = (status) => {
  const types = {
    "正常使用": "success",
    "维修中": "warning",
    "已出售": "info"
  }
  return types[status] || 'default'
}

// 生命周期钩子
onMounted(() => {
  // 模拟从API加载数据
  // setTimeout(() => {
  //   bikes.value = /* 从API获取的数据 */
  // }, 500)
})
</script>

<style lang="less" scoped>
/* 样式部分与原代码一致，无需修改 */
.user-bikes-container {
  padding: 30px;
  max-width: 1200px;
  margin: 0 auto;
  
  .header-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 30px;
    
    .page-title {
      font-size: 28px;
      color: #304156;
      font-weight: 600;
      margin: 0;
    }
    
    .search-container {
      display: flex;
      gap: 10px;
      
      .search-input {
        flex: 1;
        border-radius: 20px;
        height: 40px;
        .el-input__inner {
          border-radius: 20px;
        }
      }
      
      .search-btn {
        border-radius: 20px;
        padding: 0 20px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        
        &:hover {
          transform: translateY(-2px);
        }
      }
    }
  }
  
  .bikes-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 25px;
    
    .bike-card {
      background-color: white;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
      transition: all 0.3s ease;
      cursor: pointer;
      opacity: 0;
      transform: translateY(20px);
      
      &:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
      }
      
      &:nth-child(1) { animation: fadeIn 0.3s ease 0.1s forwards; }
      &:nth-child(2) { animation: fadeIn 0.3s ease 0.2s forwards; }
      &:nth-child(3) { animation: fadeIn 0.3s ease 0.3s forwards; }
      &:nth-child(4) { animation: fadeIn 0.3s ease 0.4s forwards; }
    }
    
    .bike-image-container {
      height: 200px;
      overflow: hidden;
      
      .bike-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s ease;
        
        &:hover {
          transform: scale(1.05);
        }
      }
    }
    
    .bike-info {
      padding: 15px;
      
      .bike-name {
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 8px;
        color: #304156;
      }
      
      .bike-type {
        color: #7f8c8d;
        margin-bottom: 8px;
      }
      
      .bike-status {
        margin-top: 10px;
      }
    }
    
    .empty-state {
      padding: 50px 0;
      text-align: center;
    }
  }
  
  // 详情对话框样式（虽然不再使用，但保留样式以便未来可能的扩展）
  .detail-container {
    display: flex;
    gap: 30px;
    
    .detail-image {
      width: 300px;
      height: 300px;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      
      .detail-bike-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    
    .detail-info {
      flex: 1;
      
      .detail-name {
        font-size: 24px;
        font-weight: 600;
        margin-bottom: 20px;
        color: #304156;
      }
      
      .detail-item {
        margin-bottom: 15px;
        display: flex;
        align-items: flex-start;
        
        .item-label {
          font-weight: 500;
          width: 100px;
          color: #7f8c8d;
          flex-shrink: 0;
        }
        
        .item-value {
          color: #304156;
          line-height: 1.5;
        }
      }
    }
  }
}

// 动画效果
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

// 响应式设计
@media (max-width: 768px) {
  .user-bikes-container {
    padding: 20px 15px;
    
    .header-section {
      .search-container {
        flex-direction: column;
        gap: 10px;
        
        .search-input, .search-btn {
          width: 100%;
        }
      }
    }
    
    .bikes-list {
      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
      gap: 20px;
    }
    
    .detail-container {
      flex-direction: column;
      
      .detail-image {
        width: 100%;
        height: 250px;
      }
    }
  }
}
</style>